<!--
 * @Author: yehongbo 1394168736@qq.com
 * @Date: 2024-02-27 19:07:17
 * @LastEditors: yehongbo 1394168736@qq.com
 * @LastEditTime: 2024-02-27 20:32:33
 * @FilePath: \giteeDownload\testthree\src\views\test16.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--  -->
<template></template>

<script setup>
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { OimoPhysics } from 'three/addons/physics/OimoPhysics.js';
// 定义变量
let camera, scene, renderer
let axesHelper
let hesLight, dirLight
let controls

// 初始化渲染器
initRenderer()
// 初始化相机
initCamera()
// 初始化场景
initScene()
// 初始化灯光
initLight()
// 初始化辅助轴
initAxesHelper()
// 初始化轨道控制器
initControl()
// 打开阴影
enableShadow()
// 循环执行
animate()
// 窗体重置
window.addEventListener('resize', function () {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})
// 初始化渲染器
function initRenderer() {
  renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

}
// 初始化相机
function initCamera() {
  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100)
  camera.position.set(4, 4, 4)
}
// 初始化场景
function initScene() {
  scene = new THREE.Scene()
  scene.background = new THREE.Color(0x888888)
}
// 初始化辅助轴
function initAxesHelper() {
  axesHelper = new THREE.AxesHelper(1)
  scene.add(axesHelper)
}
// 初始化灯光
function initLight() {
  //环境光
  hesLight = new THREE.HemisphereLight() //白色光
  hesLight.intensity = 0.3
  scene.add(hesLight)
  //平行光
  dirLight = new THREE.DirectionalLight() //太阳光
  dirLight.position.set(5, 5, -5)
  scene.add(dirLight)
}
// 初始化轨道控制器
function initControl() {
  controls = new OrbitControls(camera, renderer.domElement)
}
//打开阴影
function enableShadow() {
  renderer.shadowMap.enabled = true
  dirLight.castShadow = true
}
// 循环执行
function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}


let ball
// 初始化物体
function initMeshes() {
  ball = new THREE.Mesh(
    new THREE.SphereGeometry(0.05, 32, 16),
    new THREE.MeshLambertMaterial()
  )
  ball.position.set(0, 2, 0)
  scene.add(ball)
}
// 初始化物体
initMeshes()


// 使用OimoPhysics物理引擎插件

// OimoPhysics 提供的是一个异步函数，我们可以直接调用它
//  OimoPhysics 提供了一个addMesh方法，通过该方法，可以将物体添加到OimoPhysics 创建的物理世界中，addMesh有两个参数，第一个参数是我们创建的物体模型，第二个参数代表该物体是否参与物理世界的运动，默认为0，即不参与，设置为1表示参与

// 前面我们已经引入了 OimoPhysics 插件，这里我们来使用它实现小球下落的过程
// 由于其是异步函数，我们通过await在等待其执行结果
//  首先我们新建一个变量来接收OimoPhysics 执行的结果

let physics

// 创建一个 enablePhysics() 函数，并调用OimoPhysics
// 刷新浏览器，我们看到小球有了下落的效果，但是，我们发现小球会一直下落，这不是我们想要的，需要添加地板floow
// async function enablePhysics() {
//   physics = await OimoPhysics()
//   physics.addMesh(ball)
// }

let floor
// 地面
floor = new THREE.Mesh(
  new THREE.BoxGeometry(10, 1, 10),
  new THREE.ShadowMaterial({ color: 0x111111 }) //影子的颜色

)
floor.position.set(0, -1, 0)
scene.add(floor)

async function enablePhysics() {
  physics = await OimoPhysics()
  physics.addMesh(floor) //添加一个地面 --（第二个参数不写，表示为刚体）  
  // 创建完成后，刷新浏览器，我们发现页面没有任何变化，这是因为我们在addMesh方法中，没有设置第二个参数，默认为0，即代表小球不参与物理世界的运动，我们把其设置为1，
  physics.addMesh(ball, 1)
}

floor.receiveShadow = true
ball.castShadow = true

enablePhysics()

// OimoPhysics插件的使用
</script>

